import { useState, useEffect, useMemo } from "react";
import copy from "clipboard-copy";
import { Button, Toast } from "antd-mobile";
import Header from "@/components/header";
import Card, { CardItem } from "@/components/Card";
import Tags from "@/components/tags";
import PayDiscount from "@/components/payDiscount";
import Footer from "../../components/footer";

import { useNavigate } from "react-router-dom";
import dayjs from "dayjs";
import { PAYCODE_CONFIG } from "@/utils/const";
import { NumberFormatter } from "@/utils";
import { onOrderDetail } from "@/api/success";
import yunshanfu from "@/assets/images/yunshanfu.png";
import "./index.less";
import { ceil } from "lodash";

function Success() {
  const navigate = useNavigate();
  const params = new URLSearchParams(location.search);
  const orderId = params.get("orderId");

  const [orderDetail, setOrderDetail] = useState({});
  const handleGoHome = () => {
    navigate("/orders", { replace: true });
  };

  const handleCopyOrderNo = (val) => {
    copy(val);
    Toast.show({ content: "复制成功",maskClickable: false  });
  };

  useEffect(() => {
    if (orderId) {
      onOrderDetail({ orderId }).then((res) => {
        console.log(res, "res");
        setOrderDetail(res?.data?.data || {});
      });
    }
    return () => {
      setOrderDetail({});
    };
  }, [orderId]);

  const payCodeConfig = useMemo(() => {
    return PAYCODE_CONFIG[orderDetail?.payType] || {};
  }, [orderDetail]);

  return (
    <div className="success-page">
      <Header hasBack={false} />
      <div className="success-content">
        <Card
          hover={false}
          footer={{
            discount: ceil(
              (orderDetail?.pointDeductAmt || 0) +
                (orderDetail?.discountMoney || 0),
              4
            ).toFixed(2),
            realValue: ceil(orderDetail?.txnAmt, 4).toFixed(2),
          }}
        >
          <PayDiscount
            discount={ceil(
              (orderDetail?.pointDeductAmt || 0) +
                (orderDetail?.discountMoney || 0),
              4
            ).toFixed(2)}
            amount={ceil(orderDetail?.txnAmt, 4).toFixed(2)}
          />
          <CardItem label="商户" value={orderDetail?.storeName || "--"} />
          <CardItem
            label="订单号"
            value={
              <div
                className="order-copy"
                onClick={() => {
                  handleCopyOrderNo(
                    NumberFormatter.formatCardNumber(orderDetail?.orderId)
                  );
                }}
              >
                <span>
                  {NumberFormatter.formatCardNumber(orderDetail?.orderId)}
                </span>
                {NumberFormatter.formatCardNumber(orderDetail?.orderId) ? (
                  <Tags type="copy" label={"复制"} />
                ) : null}
              </div>
            }
          />
          <CardItem
            label="交易时间"
            value={
              orderDetail?.orderTime
                ? dayjs().format("YYYY-MM-DD HH:mm:ss")
                : "--"
            }
          />
          <CardItem
            label="支付方式"
            value={
              <div className="order-copy">
                <img src={payCodeConfig?.icon || yunshanfu} alt="" />
                <span>{payCodeConfig?.name || "云闪付"}</span>
              </div>
            }
          />
          <CardItem
            label="订单金额"
            value={`${orderDetail?.orderMoney || "--"}元`}
          />
          {/* <CardItem`
            label="亮码付会员折扣"
            value={
              <div className="order-copy">
                <Tags label={`省${orderDetail?.discount || "--"}折`} />
                <span>省{orderDetail?.discountMoney || "--"}元</span>
              </div>
            }
          /> */}
          {/* <CardItem
            label="数值豆折扣"
            value={
              <div>
                {orderDetail?.usePoint || 0}数智豆已抵扣
                {orderDetail?.pointDeductAmt || 0}元
              </div>
            }
          /> */}
        </Card>
      </div>
      <Footer>
        <div className="btn">
          <Button
            color="primary"
            style={{ width: "100%", borderRadius: "32px" }}
            onClick={handleGoHome}
          >
            查看订单
          </Button>
        </div>
      </Footer>
    </div>
  );
}

export default Success;
